<template>
  <div class="lf-html-wrapper" :class="{ active }">
    <div class="prefix-icon">
      <Icon size="24" color="#F56C6C"><PauseCircle /></Icon>
    </div>
    <div class="title">{{ name }}</div>
  </div>
</template>

<script lang="ts">
import { ref, defineComponent, onMounted } from 'vue'
import { PauseCircle } from '@vicons/ionicons5'
import { Icon } from '@vicons/utils'
import { intersectionBy } from 'lodash-es'

export default defineComponent({
  name: 'EndHtml',
  components: { PauseCircle, Icon },
  props: {
    id: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      default: () => {}
    },
    graphModel: {
      type: Object,
      default: () => ({})
    },
    optionalNodes: {
      type: Array,
      default: () => []
    },
    targetKey: {
      type: String,
      default: ''
    }
  },
  setup: (props, context) => {
    const { emit } = context
    const title = ref<string>('审批节点')
    const active = ref<boolean>(false)

    const changeData = () => {
      title.value = '标题hello-world'
      emit('changeData', title.value)
    }
    props.graphModel.eventCenter.on('node:click', (el) => {
      setLineAnimation(el.data.id)
    })

    onMounted(() => {
      setLineAnimation(props.targetKey)
    })

    const setLineAnimation = (targetId) => {
      if (props.optionalNodes.includes(targetId)) {
        active.value = targetId === props.id
        if (active.value) {
          const nodeIds = props.graphModel.getNodeIncomingNode(targetId)
          // 获取条件流转节点
          const getWayNode = nodeIds.find((item) => item.type === 'exclusiveGateway')
          // 获取条件流转节点的出边
          const getWayNodeOutEdges = props.graphModel.getNodeOutgoingEdge(getWayNode.id)
          // 获取当前节点的入边
          const currNodeInEdges = props.graphModel.getNodeIncomingEdge(targetId)
          // 获取条件流转节点的出边和当前节点的入边的交集
          const intersection: any[] = intersectionBy(getWayNodeOutEdges, currNodeInEdges, 'id')
          emit('selectOptionalNode', getWayNode.id, intersection[0].id, targetId)
        }
      }
    }
    return {
      title,
      active,
      changeData
    }
  }
})
</script>

<style scoped>
.lf-html-wrapper {
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 43px;
  box-sizing: border-box;
  padding: 0 10px;
  width: 170px;
  height: 43px;
  position: relative;
  top: 5px;
  left: 5px;
  box-shadow: 0px 3px 5px 1px #e0e0e0;
}
.lf-html-wrapper .title {
  margin-left: 10px;
  flex: 1;
  text-align: left;
}
.lf-html-wrapper .prefix-icon {
  display: flex;
}
.active {
  box-shadow: inset 0px 0px 5px 0px #f00;
}
</style>
